// 习惯性的将 hooks 以 use 开头

import { useIntersectionObserver } from "@vueuse/core"
import { ref } from "vue"

// lazyData 懒加载数据
export function useLazyData(cb: () => void) {
  // 引用数据类型传递
  // 这样封装 hooks 的前提在于, 响应式数据必须是引用类型
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      cb()
      stop()
    }
  }, {
    threshold: 0 // 将阈值设置为 0 表示一碰到立即就触发
  })
  return target
}